<template>
  <el-dialog
    title="品牌编辑"
    :visible.sync="show"
    width="40%"
    :before-close="handleClose"
  >
    <el-form v-if="form">
      <el-form-item label="品牌名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="Logo">
        <imageUpload v-model="form.logo" />
      </el-form-item>
      <el-form-item label="图片">
        <imageUpload v-model="form.image" />
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="form.sort" />
      </el-form-item>
      <el-form-item label="状态">
        <el-switch
          v-model="form.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="0"
          :inactive-value="1"
        ></el-switch>
        {{ form.status === 1 ? "停用" : "启用" }}
      </el-form-item>

      <el-form-item label="分类">
        <el-select v-model="grade">
          <el-option label="主分类" :value="1"></el-option>
          <el-option label="子分类" :value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="主分类" v-if="grade === 2">
        <el-select v-model="brandId">
          <el-option
            v-for="item in list"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="show = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import ImageUpload from "@/components/ImageUpload";
import { brandAdd, brandEdit, brandList } from "@/api/ds/brand";
export default {
  components: {
    ImageUpload,
  },
  props: {
    editRow: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      show: false,
      form: null,
      list: [],
      //
      grade: 1,
      brandId: "",
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      let res = await brandList({ grade: 1 });
      if (res.code === 200) {
        this.list = res.rows;
      }
    },
    showDialog() {
      this.form = this.editRow;
      if (this.editRow.grade == 2) {
        this.grade = 2;
        this.brandId = this.editRow.brandId;
      } else {
        this.grade = 1;
        this.brandId = "";
      }

      this.show = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    async submit() {
      if (this.form.id === 0) {
        let obj = {
          name: this.form.name,
          logo: this.form.logo,
          image: this.form.image,
          sort: this.form.sort,
          grade: this.grade,
          status: this.form.status,
        };

        if (this.grade === 2) {
          obj.brandId = this.brandId;
        }

        let res = await brandAdd(obj);

        if (res.code === 200) {
          this.show = false;
          this.$emit("updateSuccess");

          this.getData();
        }
      } else {
        let obj = {
          name: this.form.name,
          logo: this.form.logo,
          image: this.form.image,
          sort: this.form.sort,
          status: this.form.status,
          id: this.form.id,
          grade: this.grade,
        };

        if (this.grade === 2) {
          obj.brandId = this.brandId;
        }

        let res = await brandEdit(obj);

        if (res.code === 200) {
          this.show = false;
          this.$emit("updateSuccess");
          this.getData();
        }
      }
    },
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  deactivated() {},
};
</script>
<style lang="scss" scoped></style>
